<template>
	<view class="page">
		<!-- 搜索框 -->
		<u-search placeholder="请输入搜索关键词" @confirm="searchProducts" v-model="findGoodsValue" shape="round" margin="10">
		</u-search>
		<u-button type="primary" style="width: 60px; height: 34px; margin-left: 300px; margin-top: -34px; border-radius: 10px;" @click="btnInput()"
			text="搜索"></u-button>
		<!-- 商品展示区域 -->
		<u-grid :border="false" col="2" style="margin: 0 14px;">
			<u-grid-item v-for="(product, index) in products" :key="index">
				<u-image class="product-image" :src="product.image" mode="aspectFill"
					width="96%" height="200rpx" />
				<view class="product-info" @click="btnGoodImg(product)">
					<view style="margin-left: 20px;" class="product-name">{{ product.goodsName | truncate(10) }}</view>
					<view class="product-footer">
						<view style="margin-left: 4px;" class="product-price">￥{{ product.goodsPrice }}</view>
						<view style="margin-left: 20px;" class="product-brand">{{ product.storeName }}</view>
					</view>
				</view>
			</u-grid-item>
		</u-grid>
	</view>
</template>

<script>
	import {
		findTAreas,
		findSelectClass,
		findGoods,
		findConstGoods,
		findConstGoods1
	} from '../../api/tome.js';

	export default {
		data() {
			return {
				products: [],
				findGoodsValue: ''
			};
		},
		created() {
			this.loadMoreProducts()
		},
		methods: {
			// 点击搜索
			btnInput() {
				console.log(this.findGoodsValue)
				this.products = [];
				this.loadMoreProducts()
			},
			// 分页查询商品
			loadMoreProducts() {
				// 获取地区id
				let areasid1 = this.$cookies.get("countryId");
				let classifyId = this.$cookies.get("classifyId")
				let params = {
					areasId: areasid1,
					classifyId: classifyId,
					goodsName: this.findGoodsValue,
				};
				findConstGoods1(params)
					.then(request => {
						if (request.code == 300) {
							alert(request.message);
						} else {
							// 拼接数据
							this.products = request.data;
						}
					}).catch(error => {
						// 处理请求错误
						console.error("Error loading more products:", error);
					});
			},
			// 点击商品图片时调用的方法
			btnGoodImg(item) {
				console.log(item.goodsId)
				this.$cookies.set("goodsId", item.goodsId)
				uni.navigateTo({
					url: '/pages/profile/recommend'
				})
			},
		},
		filters: {
			// 截取字符串的过滤器
			truncate: function(value, length) {
				if (!value) return '';
				if (value.length > length) {
					return value.slice(0, length) + '...';
				} else {
					return value;
				}
			},
		},
	};
</script>

<style>
	.page {
		padding: 10px;
	}

	.product-image {
		border-radius: 4px;
		overflow: hidden;
	}

	.product-info {
		padding: 10px 0;
	}

	.product-name {
		font-size: 14px;
		color: #333;
	}

	.product-footer {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 5px;
	}

	.product-price {
		color: red;
		font-size: 16px;
	}

	.product-brand {
		font-size: 12px;
		color: #666;
	}
</style>